<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>index</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>

<div id="main-content" class="layui-container">

    <hr>

    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:200px;"></label>
                <div class="layui-form-mid layui-word-aux">
                    <button id="connect" class="layui-btn layui-btn-radius layui-btn-sm" type="submit">
                        Connect WebSocket
                    </button>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <button id="disconnect" class="layui-btn layui-btn-disabled layui-btn-radius layui-btn-sm" type="submit">
                        Disconnect WebSocket
                    </button>
                </div>
            </div>
        </div>

        <hr>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:200px;">请输入测试信息：</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" id="name" class="layui-input" placeholder="请输入">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <button id="send" class="layui-btn layui-btn-radius layui-btn-sm" type="submit">Send</button>
                </div>
            </div>
        </div>

        <hr>

        <table id="conversation" class="layui-table">
            <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
            </thead>
            <tbody id="greetings"></tbody>
        </table>
    </div>
</div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/sockjs.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<script th:inline="javascript">
    var userId = [[${userId}]];
</script>
<script>
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery;

        var stompClient = null;

        /**
         * 设置按钮和内容样式
         */
        function setConnected(connected) {
            if(connected){
                $('#connect').addClass("layui-btn-disabled");
                $('#disconnect').removeClass("layui-btn-disabled");
            }else{
                $('#connect').removeClass("layui-btn-disabled");
                $('#disconnect').addClass("layui-btn-disabled");
                $('#name').val('');
            }
            $("#greetings").html("");
        }

        /**
         * 连接到websocket
         */
        function connect() {
            var disableValue = $('#connect').hasClass('layui-btn-disabled');
            if(!disableValue){
                var socket = new SockJS('/websocket');
                stompClient = Stomp.over(socket);
                stompClient.connect({name:'test'}, function (frame) {
                    setConnected(true);
                    stompClient.subscribe('/topic/kmeans', function (greeting) {
                        showGreeting(JSON.stringify(greeting.body));
                    });
                });
            }
        }

        /**
         * 关闭websocket
         */
        function disconnect() {
            var disableValue = $('#disconnect').hasClass('layui-btn-disabled');
            if(!disableValue) {
                if (stompClient !== null) {
                    stompClient.disconnect();
                }
                setConnected(false);
            }
        }

        /**
         * 发送信息到websocket后台
         */
        function sendName() {
            stompClient.send("/kmeanswebsocket", {}, JSON.stringify({'name': $("#name").val()}));
        }

        /**
         * 将websocket返回的信息挂载到页面
         * @param message
         */
        function showGreeting(message) {
            $("#greetings").append("<tr><td>" + message + "</td></tr>");
        }

        $(function () {
            $("form").on('submit', function (e) {
                e.preventDefault();
            });
            $("#connect").click(function () {
                connect();
            });
            $("#disconnect").click(function () {
                disconnect();
            });
            $("#send").click(function () {
                sendName();
            });
        });



    });
</script>
</body>
</html>